<template>
    <div>
        <nut-navbar class="header" title="商品分类" @on-click-back="router.push({name:home})" icon="share" @on-click-send="send"></nut-navbar>
        <main>
            <nut-tabs class="tab" v-model="state" title-scroll direction="vertical">
                <nut-tabpane v-for="(item,index) in list" :key="index" :title="item">
                    <div class="banner">
                        <img src="https://img60.ddimg.cn/2021/12/14/202112140953401237.jpg" alt="">
                    </div>
                    <div class="picture_text_b">
                        <h3 class="ios fl">榜单</h3>
                        <ul class="clearfix flex only_pic">
                            <li>
                                <img src="https://img61.ddimg.cn/upload_img/00791/xmj/zong-1581576053.png">
                                <p>总榜</p>
                            </li>
                            <li>
                                <img src="https://img60.ddimg.cn/upload_img/00796/1/1-1622793545.png">
                                <p>新书榜</p>
                            </li>
                            <li>
                                <img src="https://img62.ddimg.cn/upload_img/00779/xmj/kid-1565680692.png">
                                <p>童书榜</p>
                            </li>
                        </ul>
                    </div>
                    <div class="picture_text_b mb1">
                        <h3 class="ios fl">小说</h3>
                        <ul class="clearfix flex only_pic">
                            <li class="mb2">社会</li>
                            <li class="mb2">侦探/悬疑/推理</li>
                            <li class="mb2">情感</li>
                            <li>世界名著</li>
                            <li>科幻</li>
                            <li>武侠</li>
                        </ul>
                    </div>
                    <div class="picture_text_b mb1">
                        <h3 class="ios fl">文学</h3>
                        <ul class="clearfix flex only_pic">
                            <li class="mb2">当代随笔</li>
                            <li class="mb2">名家作品</li>
                            <li class="mb2">文集</li>
                            <li>纪实文学</li>
                            <li>中国古诗词</li>
                            <li>古代言情</li>
                        </ul>
                    </div>
                    <div class="picture_text_b mb1">
                        <h3 class="ios fl">青春文学</h3>
                        <ul class="clearfix flex only_pic">
                            <li class="mb2">爱情</li>
                            <li class="mb2">情感</li>
                            <li class="mb2">古代言情</li>
                            <li>穿越</li>
                            <li>校园</li>
                            <li>古诗词</li>
                        </ul>
                    </div>
                </nut-tabpane>
            </nut-tabs>
        </main>
    </div>
</template>

<script>
import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'
import {useRouter} from "vue-router"
export default {
    setup() {
        let router=useRouter()
        const data = reactive({
            state:'图书',
            list:['图书',"童书",'电子书','旧书']
        })
        const refData = toRefs(data);
        return {
            ...refData,router
        }
    }
};
</script>
<style scoped lang="scss">
.header{
    height: 50px;position: fixed;box-sizing: border-box;top: 0;width: 100%;z-index:999;background-color: #fff;
}
main{
    margin: 50px 0 50px 0;height: calc(100vh - 100px);
    .nut-tabs.vertical{height: 100%;}
    .nut-tabpane{padding: 24px 10px;}
    .banner{
        img{width: 100%;}
    }
    .picture_text_b{
        margin-top: 8px;
        .ios{font-size: 13px;}
        .only_pic{
            flex-wrap: wrap;
            li{width: 33%;font-size: 12px;
                img{width: 100%;}
                p{text-align: center;margin: 5px 0 0 0;}
            }
        }
    }
}
</style>